---
// 笔记
import { getCollection } from 'astro:content';
import LayoutBase from '@/layouts/layout-base.astro';
import DocListComp from '@/components/article/doc-list.vue';
import DocDirectoryComp from '@/components/article/doc-directory/index.vue';
import { collectDocList, collectCrumbList } from './document-list';
import '@/styles/markdown-content.scss';
import BreadcrumbComp from '@/components/article/breadcrumb.astro';

// 1. 为每个集合条目生成一个新路径
export async function getStaticPaths() {
  const docsEntries = await getCollection('docs');
  return docsEntries.map(entry => {
    return {
      params: { slug: entry.slug },
      props: { entry },
    }
  });
}
// 2. 当渲染的时候，你可以直接从属性中得到条目
const { entry } = Astro.props;
const { Content, headings } = await entry.render();

// 3. 收集 doc 列表
const docList = await collectDocList();

// 4. 收集本页标题，取 2、3 级标题
const headingsFilter = headings.filter(item => (item.depth === 2 || item.depth === 3) && item.text);
const docDirectory: any = []
headingsFilter.forEach(item => {
  if(item.depth === 2) {
    docDirectory.push({
      title: item.text,
    })
  } else {
    const parent = docDirectory[docDirectory.length - 1];
    if(parent) {
      if(!parent.children) {
      parent.children = [
        {
          title: item.text,
        }
      ]
      } else {
        parent.children.push({
          title: item.text,
        })
      }
    }
  }
});

const pageTitle = entry.data.title || entry.slug; // 浏览器页签标题

// 5. 面包屑列表
const crumbs = await collectCrumbList(entry.slug);
---

<LayoutBase title={pageTitle} description={entry.slug}>
  <!-- 文档列表 -->
  <section class="flex">
    <div class="hidden w-1/5 bg-slate-100 min-w-[260px] sm:flex justify-end doc-list-box">
      <div class="w-[240px] mr-12 mt-8 ml-8">
        <DocListComp client:load list={docList} currentRoute={entry.slug} /> 
      </div>
    </div>
    <div class="flex w-full sm:w-4/5 p-8 min-h-[50vh] doc-content-body">
      <div class="w-full md:w-4/5 pb-8 h-fit">
        <!-- 面包屑 -->
        <BreadcrumbComp crumbs={crumbs} />
        <div class="hsm-markdown-content">
          <Content />
        </div>
      </div>
      <div class="hidden md:flex fixed right-[20px] doc-directory-box">
        <DocDirectoryComp client:load list={docDirectory} /> 
      </div>
    </div>
  </section>
</LayoutBase>

<style>
  .doc-list-box{
    height: calc(100vh - 4rem);
    overflow: auto;
  }
  .doc-content-body{
    height: calc(100vh - 4rem);
    overflow: auto;
  }
  .doc-directory-box{
    width: calc(20% - 6.5rem);
    height: calc(100vh - 8rem);
    overflow: auto;
  }
</style>
